<template>
	<view class="container" v-if="isLoading">
		<map id="map" class="mapBox" :latitude="latitude" :longitude="longitude" :scale='14' :markers="markers"
			:polyline='polyline'></map>
		<cover-view class="mask">
			<cover-view class="cell flex-ac">
				<cover-view class="hd">实际线路：</cover-view>
				<cover-view class="bd-1"></cover-view>
			</cover-view>
			<cover-view class="cell flex-ac">
				<cover-view class="hd">规划线路：</cover-view>
				<cover-view class="bd-2"></cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import config from '@/utils/config.js' //这个就是你在第一步申请的key值
	const amapFile = require('@/utils/amap-wx.130.js') //引入高德地图 ，根据自己放置的文件路径来决定
	const myAmapFun = new amapFile.AMapWX({
		key: config.MAP_KEY
	}); //创建一个实例化对象
	export default {
		data() {
			return {
				isLoading: false,
				current: 0,
				id: this.id,
				orderInfo: {},
				polyline: [],
				markers: [],
				latitude: '', //中心点纬度
				longitude: '', //中心点经度
				searchText: 'system',
				nodeList: []
			}
		},
		onLoad(opt) {
			console.log(config.MAP_KEY)
			if (opt) console.log('opt:', opt)
			this.id = opt.id
			this.getTrackInfo()
		},
		methods: {
			// 获取运单运输信息 /consignorApi/transportOrder/getTrackInfo
			getTrackInfo() {
				this.$Net.get('/orderTransport/track/' + this.id).then(res => {
					console.log('轨迹信息:', res)
					this.planList = res.data.plan
					this.nodeList = res.data.actual
					if(res.data.plan.length > 0){
						this.getRoute(res.data.plan[1].lng, res.data.plan[1].lat, res.data.plan[0].lng, res.data.plan[0].lat)
					}
					if (this.nodeList.length == 0 && this.nodeList.length == 0) {
						uni.showToast({
							title: '暂无该轨迹',
							icon: 'none'
						})
						this.markers = []
						this.polyline = []
						return
					}else{
						this.markers[0] = {
							id: 1,
							latitude: this.nodeList[0].lat,
							longitude: this.nodeList[0].lng,
							iconPath: '../../../../static/img/jdz.png',
							width: 30,
							height: 30,
						}
						this.markers[1] = {
							id: 2,
							latitude: this.nodeList[this.nodeList.length - 1].lat,
							longitude: this.nodeList[this.nodeList.length - 1].lng,
							iconPath: '../../../../static/img/jdx.png',
							width: 30,
							height: 30,
						}
						this.markers[2] = {
							id: 3,
							latitude: res.data.plan[0].lat,
							longitude: res.data.plan[0].lng,
							iconPath: '../../../../static/img/jdz.png',
							width: 30,
							height: 30,
						}
						this.markers[3] = {
							id: 4,
							latitude: res.data.plan[1].lat,
							longitude: res.data.plan[1].lng,
							iconPath: '../../../../static/img/jdx.png',
							width: 30,
							height: 30,
						}
						this.latitude = this.nodeList[1].lat
						this.longitude = this.nodeList[1].lng
						let points = res.data.actual.map(el=>{
							return { 
								latitude: el.lat,
								longitude: el.lng
							}
						})
						this.polyline.push({
							points: points,
							color: "#00C22C",
							width: 5
						});
					}
					console.log(this.markers)
					if (this.nodeList.length == 0) {
						uni.showToast({
							title: '暂无行驶轨迹',
							icon: 'none'
						})
					}
					this.isLoading = true
				})
			},
			
			// 获取路线
			getRoute(senderLongitude, senderLatitude, receiverLongitude, receiverLatitude) {
				console.log(senderLongitude, senderLatitude, receiverLongitude, receiverLatitude)
				myAmapFun.getDrivingRoute({
					origin: senderLongitude + ',' + senderLatitude,
					destination: receiverLongitude + ',' + receiverLatitude,
					success: (data) => {
						console.log('路线:', data)
						let points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							let steps = data.paths[0].steps;
							for (let i = 0; i < steps.length; i++) {
								let poLen = steps[i].polyline.split(';');
								for (let j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
			
								}
							}
						}
						this.polyline.push({
							points: points,
							color: "#ffff00",
							width: 5
						});
					},
					fail: (f) => {
						console.log(f)
					},
					catch: (c) => {
						console.log(c)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.container {
		width: 100vw;
		height: 100vh;
		.mapBox{
			width: 100%;
			height: 100%;
		}
		.mask{
			position: fixed;
			top: 24rpx;
			left: 24rpx;
			z-index: 20;
			width: 300rpx;
			height: 150rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 10rpx;
			.cell{
				height: 75rpx;
				line-height: 75rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #f7f7f7;
				padding: 0 30rpx;
				.bd-1{
					flex: 1;
					height: 14rpx;
					border-radius: 7rpx;
					background-color: #00C22C;
				}
				.bd-2{
					flex: 1;
					height: 14rpx;
					border-radius: 7rpx;
					background-color: #ff0;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	@import './orderMap.scss';
</style>